<template>
    <div id="main">
        <div id="up">
            <div class="grade_views">
                <grade-line></grade-line>
            </div>

            <div class="grade_views">
                <homework-component :homeworks="homeworks"></homework-component>
            </div>
            <div class="grade_views">
                <sign-component></sign-component>
            </div>
            <!-- <div class="grade_views">

            </div> -->
        </div>
        <div id="down">
            <chart-comment></chart-comment>
        </div>
    </div>
</template>

<script>
import GradeLine from '@/components/module_components/GradeLine.vue';
// import ChatComponent from '@/components/module_components/ChatComponent.vue';
import SignComponent from '@/components/module_components/SignComponent.vue';
import HomeworkComponent from '@/components/module_components/HomeworkComponent.vue';
import axios from "axios";
import { getExp } from "@/utils/urlManager";
import ChartComment from '@/components/module_components/ChartComment.vue';
export default {
    components: { GradeLine, SignComponent, HomeworkComponent, ChartComment },
    data() {
        return {
            message: '你好',
            course_data: [],
            // loading: [true]
            homeworks: [
                {
                    id: 1,
                    name: "作业1",
                    completed: true,
                    completedTime: "2024-05-20",
                    score: 90,
                },
                {
                    id: 2,
                    name: "作业2",
                    completed: false,
                },
                {
                    id: 3,
                    name: "作业3",
                    completed: true,
                    completedTime: "2024-05-22",
                    score: 85,
                },
            ],
        }
    },
    mounted() {
        this.getExp();
    },
    methods: {
        getExp() {
            setTimeout(() => {
                axios.get(getExp)
                    .then((response) => {
                        const data = response.data;
                        if (data.data != null && data.data.length > 0) {
                            this.homeworks = [];
                            this.homeworks = data.data;
                            console.log(this.homeworks);
                        } else {
                            this.homeworks = [{
                                id: null,
                                name: null,
                                completed: null,
                                completedTime: null,
                                score: null,
                            }]
                        }
                        // this.loading[2] = false;
                    })
                    .catch((err) => {
                        // this.loading[2] = false;
                        console.log(err);
                        this.$message.error("历史记录获取信息失败~");
                    })
            }, 1000);
        },
        // getGrade() {
        //     axios.get(getGrade)
        //         .then((response) => {
        //             const res = response.data
        //             console.log(res);
        //             if (res != null && res.code == 1) {
        //                 this.course_data = null;
        //                 this.course_data = res.data
        //                 console.log(this.course_data);

        //                 this.loading[0] = false;

        //                 // this.grade_chart();
        //             }
        //         })
        //         .catch((err) => {
        //             console.error(err);
        //         })
        // },
    }
}
</script>

<style scoped>
/* 电脑端 */
@media screen and (min-width: 768px) {
    #main {
        width: 96%;
        height: 96%;
        /* display: flex; */
        padding: 1%;
    }

    #up {
        width: 100%;
        height: 45%;
        display: flex;
        justify-content: space-between;
        /* 平均间距分布 */
    }

    #down {
        width: 100%;
        height: 55%;
    }

    .grade_views {
        width: 31%;
        height: 90%;
        border-radius: 10px;
        transition: transform 0.3s ease;
        /* 添加平滑过渡效果 */

        /* 第一个阴影 */
    }

    .grade_views:hover {
        transform: scale(1.05);
        box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
        /* 鼠标移入时放大到1.2倍 */
    }
}

@media screen and (max-width: 768px){
    #main {
        width: 96%;
        height: 96%;
        /* display: flex; */
        padding: 1%;
    }

    #up {
        width: 100%;
        height: 45%; 
    }

    #down {
        display: none;
    }

    .grade_views {
        width: 100vw;
        height: 50vh;
        border-radius: 10px;
        /* transition: transform 0.3s ease; */
    }
}
</style>